<template>
    <a-modal
            v-model="visible"
            :width="600"
            :title="isEdit ? '编辑推送路由信息' : '添加推送路由信息'"
            :maskClosable="false"
            @ok="confirm"
            @cancel="cancel"
            okText="确定"
            cancelText="取消"
    >
        <a-form :form="form" @keydown.native.enter.prevent='confirm' class="modelSearch">
            <a-form-item v-bind="formStyle" label="IPV4地址" required>
                <a-input type="text"  class="formWidth" ref="refocus" v-decorator="[
                                        'targetNet',
                                        {
                                            rules: [{ required: true, message: '请输入合法IP' }, { validator: this.verify.validateIP.bind(this) }],
                                            getValueFromEvent: event => {
                                                return this.verify.formalIP(event,18)
                                            }
                                        }
                                    ]"  placeholder="请输入IPV4地址"/>
            </a-form-item>
            <a-form-item v-bind="formStyle" label="子网掩码" required>
                <a-input placeholder="请输入子网掩码" class="formWidth"
                         v-decorator="[
                        'targetNetMask',
                        {
                            rules: [
                                { required: true, message: '请输入合法子网掩码' },
                                { validator: this.verify.validatenetmask.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalIP(event,18)
                            }
                        }
                    ]"
                />
            </a-form-item>
           <!-- <a-form-item v-bind="formStyle" label="默认网关" required>
                <a-input type="text"  class="formWidth" v-decorator="[
                                        'gw',
                                        {
                                            rules: [{ required: true, message: '请输入合法IP' },, { validator: this.verify.validateIP.bind(this) }],
                                            getValueFromEvent: event => {
                                                return this.verify.formalIP(event,18)
                                            }
                                        }
                                    ]"  placeholder="请输入默认网关"/>
            </a-form-item>-->
        </a-form>
    </a-modal>
</template>
<script>
    import verify from 'libs/verify'
    import { mapState } from 'vuex'

    export default {
        name: 'add_edit',
        data () {
            return {
                form: this.$form.createForm(this),
                isEdit: false,
                isAuth: false,
                visible: false,
                sessionUserName: '',
                verify,
                id: 0,
            }
        },
        computed: {
            ...mapState({
                formStyle: state => state.common.formStyle,  //表单label，input宽度
            })
        },
        methods: {
            /**
             * Function    : showAddModal
             * Description : 新增单位时显示弹框
             * Input       : none
             * Return      : none
             */
            showAddModal () {
                this.visible = true;
                this.isEdit = false;
                let _this = this;
                setTimeout(function () {
                    _this.$refs['refocus'].focus()
                }, 200)
            },
            /**
             * Function    : showEdit
             * Description : 编辑时单位显示
             * Input       : opt单个单位所有数据
             * Return      : none
             */
            showEdit (opt) {
                this.isEdit = true;
                this.visible = true;
                this.id = opt.id;
                this.$nextTick(() => {
                    this.form.setFieldsValue(
                        this.$pick(opt, [
                            'targetNet',
                            'targetNetMask'
                        ])
                    )
                })
            },
            /**
             * Function    : confirm
             * Description : 表单提交
             * Input       : data
             * Return      : none
             */
            confirm (e) {
                e.preventDefault();
                this.form.validateFields((err, value) => {
                    if (!err) {
                        if (this.isEdit) {
                            value.id = this.id
                        }
                        this.$emit('addRouteListFun',this.isEdit,value)
                        this.cancel()
                    }
                })
            },
            /**
             * Function    : cancel
             * Description : 取消表单显示
             * Input       : data
             * Return      : none
             */
            cancel () {
                this.visible = false;
                let _this = this;
                setTimeout(function () {
                    _this.form.resetFields()
                }, 100)
            }
        }
    }
</script>

